<template>
  <div>我是首页</div>

  <div>
    <router-link to="/about">about</router-link>
  </div>

  <div>
    <router-link to="/home">home</router-link>
  </div>

  <hr>
  <div>
    显示组件
    <div>
      <router-view></router-view>
    </div>
  </div>

<!-- 

  实现路由 的步骤 
  1.首先 设置npm vue-router
  2.创建router的 js或者 ts 文件,然后引入 vue-router  import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

  2.创建 router的配置 路径和组件,然后通过createRouter 创建router实例

  3.然后在想要使用的地方 引入 <router-link to="/about">about</router-link>(连接点击跳转到 响应的组件)  和  <router-view></router-view>(组件显示的位置)
  
 -->
</template>

<script lang="ts">
// shallowReactive (浅的劫持) 和 Reactive(深劫持)

import { computed, defineComponent, watch } from "vue";

import {mapGetters,mapState,mapActions,mapMutations} from 'vuex'

export default defineComponent({
  // 组合api

  // teleport 可以把组件放在指定的标签下
  // suspense 处理异步组件,在异步加载的时候有一个空白期,用户体验不好,可以使用suspense弥补空白期

  setup() {
    

    return {

    };
  },
  // components: {
  //   About,
  //   Home,
  // },

  //  vue项目 ,首先分析静态页面,根据静态页面来创建组件, 在最后的app组件中引入其他组件, 其他组件也可以细分组件,然后引入即可(css放在组件的style中,html放在templte中)

  // 跨组件传递方法, 因为是子组件通过点击事件 需要修改父组价的数据,那么父组件需要暴露一个修改方法然后传递个子组件,子组件调用方法去改变数据

  //父级组件的数据 尽量不要让子级组件直接去操作,而是父级组件 通过暴露一个方法去给子级组件去修改父级组件的属性

  // 方法,计算属性,属性监视

  // vue3 和 vue2的比较和优势

  //1. 首先vue3 是在2020年9月发布的正式版
  //2. 而且vue3 支持大部分的vue2特性
  //3. vue中设计了一套强大的 组合API 代替了vue2中 optionAPI ,复用性更强了,而且使用组合API 代码更加清晰,代码不会特别分散,影响阅读 (组合API就是在 setup中写, 而optionAPI就是以前的data,method,compute)
  //4. 也更好的支持了TS
  //5. 最主要的是 vue3中使用了Proxy代替了Vue2中的 Object.defindProperty 的方式实现响应式处理()
  //6. 重写了虚拟dom ,优化更好了,  treesKing优化更加强大
  //7. 新的组件
  //8. 新的脚手架 vite

  //1. Object.defineProperty只能劫持对象的属性，而 Proxy 是直接代理对象。
  // 	由于 Object.defineProperty 只能对属性进行劫持，需要遍历对象的每个属性，
  // 	如果属性值也是对象，则需要深度遍历。而 Proxy 直接代理对象，不需要遍历操作。

  // 2. Object.defineProperty对新增属性需要手动进行 Observe。
  // 	由于 Object.defineProperty劫持的是对象的属性，所以新增属性时，需要重新遍历对象，
  // 	对其新增属性再使用 Object.defineProperty 进行劫持。

  // 也正是因为这个原因，使用 Vue 给 data 中的数组或对象新增属性时，

  //Object.defineProperty只能遍历对象属性进行劫持  ----- Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的
});
</script>

<style scoped>
</style>